<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS - 容器查询：彻底颠覆响应式网页布局</title>
    <link rel="stylesheet" href="index.css" />
    <meta
      name="video"
      content="https://www.bilibili.com/video/BV1wCsdeEE5T/?spm_id_from=333.337.search-card.all.click&vd_source=070db046ab9534ee40b88716e1f9c91f"
    />
  </head>
  <body>
    <header class="site-header">
      <div class="logo">Logo</div>

      <button
        class="site-nav-toggle"
        aria-label="Open Navigation"
        aria-expanded="false"
      >
        &#9776;
      </button>

      <nav class="site-nav" role="navigation">
        <a href="#" title="Home">Home</a>
        <a href="#" title="Gallery">Gallery</a>
        <a href="#" title="About">About</a>
        <a href="#" title="Contact">Contact</a>
      </nav>
    </header>

    <main class="content">
      <h1>CSS @container Queries</h1>
      <p>
        Resize browser window to experience how layout changes. Watch full
        tutorial on YouTube. Resize browser window to experience how layout
        changes. Watch full tutorial on YouTube. Resize browser window to
        experience how layout changes. Watch full tutorial on YouTube.
      </p>

      <div class="post-thumbnails">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
      </div>
    </main>

    <aside class="sidebar">
      <h2>Sidebar</h2>
      <div class="post-thumbnails">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
      </div>
    </aside>

    <footer class="site-footer">Footer</footer>
  </body>
</html>
